<template>
  <div>
    <div class="toolbar">
      <el-button type="primary" @click="openNewDialog">添加任务</el-button>
    </div>
    <element-table :url="url" :page-size="10" :columns="columns" ref="elementTable"></element-table>

    <el-dialog title="任务图" :visible.sync="dialogVisible" width="1100px" >
      <slot name="-" style="border: none;padding: 0px;margin: 0px;">
        <vue-bpmn style="overflow: hidden;height: 700px;" product="flowable" @processSave="processSave"></vue-bpmn>
      </slot>
    </el-dialog>

    <el-dialog title="查看结果" :visible.sync="dialogImgVisible" v-if="dialogImgVisible">
      <el-tabs v-model="resultActive" >
        <el-tab-pane label="查看流程图" name="image">
          <div style="background: #ffffff;padding: 50px 100px;">
            <img :src="imgUrl" alt="" v-if="dialogImgVisible">
          </div>
        </el-tab-pane>
        <el-tab-pane label="查看任务结果" name="task">
          <el-table :data="resultData" ref="resultTable" >
            <el-table-column
                prop="procInstId"
                label="作业Id"></el-table-column>
            <el-table-column
                prop="name"
                label="作业名称"></el-table-column>
            <el-table-column
                prop="status"
                label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status==0">待执行</span>
                <span v-if="scope.row.status==1">成功</span>
                <span v-if="scope.row.status==2">失败</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="note"
                label="备注"></el-table-column>
            <el-table-column
                prop="status"
                label="操作">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    v-if="scope.row.status==2"
                >失败重试
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
  import ElementTable from "../../components/element/ElementTable";
  import VueBpmn from "../../components/bpmn/VueBpmn";

  export default {
    name: "design",
    data() {
      return {
        resultActive: 'image',
        imgUrl:"",
        dialogImgVisible: false,

        dialogVisible: false,
        url: this.Apis.taskList,
        columns: [{
          key: 'procId',
          title: '任务定义ID'
        }, {
          key: 'name',
          title: '任务名称'
        }, {
          key: 'status',
          title: '状态',
          formatter: (row, key) => {
            if (row[key] == 0) {
              return "待执行";
            }else if (row[key] == 1) {
              return "执行中";
            }else if (row[key] == 2) {
              return "执行成功";
            }else if (row[key] == 3) {
              return "执行失败";
            }
            return "未知状态"
          }
        }, {
          key: 'ora',
          title: '操作',
          operator: [{
            name: "执行",
            type: "text",
            click: (row) => {
              this.put(this.Apis.taskDeploy.replace("${id}", row.id), {}, res => {
                if (res.code == 200) {
                  this.$message.info("执行成功")
                  this.$refs.elementTable.reload();
                }
              });
            }
          },
            {
              name: "查看结果",
              type: "text",
              click: (row) => {
                let that = this;
                this.dialogImgVisible = true;
                this.imgUrl = this.getCallUrl(this.Apis.taskProcImage.replace("${id}", row.procInstId))+"?"+Date.now();
                this.get(this.Apis.taskProcResult.replace("${id}", row.procInstId),{}, (res)=>{
                  that.resultData = res.data
                  console.log(this.resultData)
                })
              },
              hidden: (row) => {
                return row.status == 0;
              }
            },
            {
            name: "删除",
            type: "text",
            click: (row) => {
              this.delete(this.Apis.taskRemove.replace("${id}", row.id), {}, res => {
                console.log(res)
                if (res.code == 200) {
                  this.$refs.elementTable.reload();
                }
              })
            }
          }]
        }],

        resultData:[],
        resultColumns:[
          {
            key: 'procInstId',
            title: '作业Id'
          }, {
            key: 'name',
            title: '作业名称'
          }, {
            key: 'status',
            title: '状态',
            formatter: (row, key) => {
              if (row[key] == 0) {
                return "待执行";
              }else if (row[key] == 1) {
                return "成功";
              }else if (row[key] == 2) {
                return "失败";
              }
              return "未知状态"
            }
          }, {
            key: 'note',
            title: '描述'
          }
        ]
      }
    },
    components: {
      ElementTable,
      VueBpmn
    },
    methods: {
      openNewDialog() {
        this.dialogVisible = true;
      },
      processSave(data) {
        let that = this;
        that.post(this.Apis.taskBuffer, data, res => {
          if (res.code == 200) {
            this.dialogVisible = false;
            that.$refs.elementTable.reload();
          }
        })
      }
    }
  }
</script>

<style scoped>
</style>
